﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/eStore.Master" Inherits="System.Web.Mvc.ViewPage<eStore.ViewModels.HomeIndexViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	    <%=Model.PageTitle %>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        
    /* Coda Bar */
    .coda-nav {
	    height: 30px;
	    background: #eee;
	    background: -webkit-gradient(
	        linear,
	        left bottom,
	        left top,
	        color-stop(0.23, #ddd),
	        color-stop(0.62, #eee)
	    );
	    background: -moz-linear-gradient(
	        center bottom,
	        #ddd 23%,
	        #eee 62%
	    );
	    width: 700px !important;
	    margin: 0 auto;
	    border: 5px solid #aaa;
	    border-bottom: none;
    }
	.coda-nav ul { 
		display: block; 
		margin: auto;
		overflow: hidden;
	}
	
	.coda-nav ul li { 
        display: inline;
	    overflow: hidden;
     }
		
    .coda-nav ul li a { 
        background: url('/Content/images/button.jpg') top center no-repeat;
        color: #fff;
	    display: block;
		float: left;
	    margin-right: 1px;
		text-decoration: none;
	    width: 30px;
	    height: 30px;
        text-indent: -999px;
        }
			
	.coda-nav ul li a.current {
		background: url('/Content/images/button-active.jpg') top center no-repeat;
	}
			
    .coda-nav ul li a:hover {
        background: url('/Content/images/button-active.jpg') top center no-repeat;
      }


    /* SLider Styling */
    .coda-slider {
	    display: block;
	    width: 700px;
	    overflow: hidden;
	    margin: 0 auto;
	    margin-bottom: 50px;
	    background: #eee;
	    background: -webkit-gradient(
	        linear,
	        left bottom,
	        left top,
	        color-stop(0.23, #ddd),
	        color-stop(0.62, #eee)
	    );
	    background: -moz-linear-gradient(
	        center bottom,
	        #ddd 23%,
	        #eee 62%
	    );
	    border: 5px solid #aaa;
	    border-top: none;
	
    }

	    .panel-container {
		    position: relative;
	    }

	    .coda-slider .panel {
		    float: left;
		    width: 700px;
	    }

		    .panel-wrapper {
			    margin: 0 20px;
			    overflow: hidden;
			    padding: 20px 0;
		    }
		
		    .panel-wrapper img {
				    float: left;
				    margin: 0 20px 20px 0;
				    border: 5px solid #999;
				    width:50%;
				    height:400px;
		    }
	
		    .panel-wrapper ul li {
				    margin: 10px 0;
			}
    </style>
    <script language="javascript" type="text/javascript" src="../../Scripts/jquery.easing.1.3.js"></script>
    <script language="javascript" type="text/javascript" src="../../Scripts/jquery.coda-slider-2.0.js"></script>
    <script language="javascript" type="text/javascript">
        var iSliderCountNow = 0;
        var iSliderMax = 0;
        var sliderRunPtr;
        $(document).ready(function () {
            $('.coda-slider').codaSlider({
                autoHeightEaseDuration: 1000,
                autoHeightEaseFunction: "easeInOutElastic",
                slideEaseDuration: 1000,
                slideEaseFunction: "easeInOutElastic"
            });

            sliderRunPtr = setInterval('runSlider()', 2500);
        });


        function runSlider() {
            iSliderMax = $("#coda-nav-1 li>a").size();
            
            $($("#coda-nav-1 li>a").get(iSliderCountNow)).click();
            if(iSliderCountNow>=iSliderMax)
                iSliderCountNow = 0;
            else
                iSliderCountNow ++;
        }
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <div id="featuredproducts">
    <%Html.RenderPartial("FeatureProducts", Model.TopRatedProducts); %>
   </div>
</asp:Content>
